<template>
    <div>

      <div id="myChart" :style="{width: '700px', height: '280px'}"></div>

    </div>
</template>

<script>


import axios from 'axios'
export default {
  name: 'DoubleLine',
  data() {
    return{
      myChart: {},
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              stroke: '#fff',
              lineWidth: 1
            },
            axisTick: {
              show: false
            },
            show: false,
            data: [
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'
            ]
          }
        ],

        yAxis: [
          {
            name: '',//流量(m^3/s)
            type: 'value',
            max: 500,
            axisLabel: {
              show: false,
              fill: '#fff',
            }
          },
          {
            name: '',//降雨量(mm)
            nameLocation: 'start',
            max: 5,
            type: 'value',
            inverse: true,
            axisLabel: {
              show: false,
              fill: '#fff',
            }
          }
        ],
        series: [
          {
            name: '投产量',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            linePoint: {
              show: false,
              radius: 2
            },
            data: []
          },
          {
            name: '负载',
            type: 'line',
            yAxisIndex: 1,
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            linePoint: {
              show: false,
              radius: 4
            },
            data: []
          }
        ]
      }
    }
  },
  mounted: function () {
    this.myChart = this.$echarts.init(document.getElementById('myChart'));
    this.drawLine(this.option);
    let that = this;
    setInterval(()=>{
      let dataTop = [];
      let dataBot = [];
      for (let i = 0; i < 200; i++) {
        dataTop.push((Math.random()*150).toFixed(2));
        dataBot.push((Math.random()*5).toFixed(2));
      }
      that.option = {
        series: [
          {
            name: '投产量',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            linePoint: {
              show: false,
              radius: 2
            },
            data: dataTop
          },
          {
            name: '负载',
            type: 'line',
            yAxisIndex: 1,
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            linePoint: {
              show: false,
              radius: 4
            },
            data: dataBot
          }
        ]
      }
      that.drawLine(that.option);
    }, 2000);
  },
  methods: {
    drawLine(option){
      this.myChart.setOption(option);
    }

  }

}
</script>

<style lang="less">

</style>

